<template>
  <div>
    <van-nav-bar
      style="background-color: Gainsboro;"
      title="我的评论"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="main" v-for="item in content" :key="item.id">
      <van-image
        width="3rem"
        height="3rem"
        round="true"
        fit="cover"
        position="left"
        :src="item.comment_avatar"/>
      <div class="right">
        <div class="top">
          <p>{{ item.comment_name }}</p>
          <span>{{ item.create_time }}</span>
          <van-tag plain type="primary"><van-icon name="cross" /></van-tag>
        </div>
        <p class="content">{{ item.comment_content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import httpApi from '@/http';
import { Toast } from 'vant';
  export default {
    data() {
      return {
        content: {}
      }
    },
    methods: {
      onClickLeft() {
        this.$router.push('/home/my')
      },

      getcontent(){
        httpApi.userApi.queryComment().then(res=>{
          this.content = res.data.data
          console.log('评论',this.content)
        })
      }
    },

    mounted () {
      this.getcontent()
    },
  }
</script>

<style lang="scss" scoped>
.main{
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #9a9a9a;
}
.main .right{
  margin-left: 1rem;
}
.main .right .top{
  display: flex;
}
.main>.right>.top>p{
  color: blue;
}
.main>.right>.top>span{
  font-size: 14px;
  color: #9a9a9a;
  margin-left: 0.7rem;
}
.main .right .content{
  margin-top: 1rem;
}
</style>